{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>按钮</li>
  </ol>
<section class="demo-section">

<div id="pageContent">

<article><p>按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。</p></article>



<section><header><h3>按钮的类型</h3></header><article><p>按钮根据表现形式有如下类型：</p><div class="table-responsive"><table class="table table-responsive">
  <tbody>
    <tr>
      <th class="col-md-4">按钮</th>
      <th>描述</th>
    </tr>
    <tr>
      <td><button class="btn btn-primary">主要按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code id="code-fhbisism0i"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">主要按钮</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/url/"</span><span class="tag">&gt;</span><span class="pln">主要按钮</span><span class="tag">&lt;/a&gt;</span></code></pre>
        <p>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</p>
      </td>
    </tr>
    <tr>
      <td><button class="btn btn-default">标准按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code id="code-fhbisijrc9"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">标准按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>页面上的普通按钮，例如取消表单、重置输入等。</p>
      </td>
    </tr>
    <tr>
      <td><button class="btn btn-link">链接按钮</button></td>
      <td>
      <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-link"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">链接按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
      <p>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</p></td>
    </tr>
    <tr>
      <td>
        <div class="btn-group">
          <button class="btn">按钮组</button>
          <button class="btn">第二个</button>
          <button class="btn">第三个</button>
        </div>
      </td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">按钮组</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">第二个</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">第三个</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
        <p>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。按钮组的用法参见 <a href="#component/buttongroup">组件 → 按钮组</a>。</p>
      </td>
    </tr>
  </tbody>
</table></div></article></section>


<section><header><h3>按钮的大小</h3></header><article><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <th class="col-md-4">实例</th>
      <th>描述</th>
    </tr>
    <tr>
      <td><button class="btn btn-lg btn-primary" type="button">大尺寸按钮</button>
      <button class="btn btn-lg" type="button">大尺寸按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-lg"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">大尺寸按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>大尺寸按钮。</p>
      </td>
    </tr>
    <tr>
      <td><button class="btn btn-primary" type="button">默认大小</button>
      <button class="btn btn-default" type="button">默认大小</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">默认大小按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>默认大小。</p>
      </td>
    </tr>
    <tr>
      <td><button class="btn btn-sm btn-primary" type="button">较小的按钮</button>
      <button class="btn btn-sm" type="button">较小的按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-sm "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">较小的按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>较小的按钮。</p>
      </td>
    </tr>
    <tr>
      <td><button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
      <button class="btn btn-mini" type="button">迷你按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-mini "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">迷你按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>迷你按钮。</p>
      </td>
    </tr>
    <tr>
      <td><button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button> <button class="btn btn-large btn-block btn-default" type="button">块状按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-block "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">块状按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</p>
      </td>
    </tr>
  </tbody>
</table></div></article></section>


<section><header><h3>按钮的不同状态</h3></header><article><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <th class="col-md-4">实例</th>
      <th>描述</th>
    </tr>
    <tr>
      <td><button class="btn btn-default"><i class="icon icon-star"></i> 带图标的按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-star"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 带图标的按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        在按钮上使用图标有时能起到点睛之笔的效果。
      </td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">状态切换按钮</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态（为按钮增加Class <code>.active</code>），再次点击取消选中状态。</p>
      </td>
    </tr>
    <tr>
      <td>
        <div class="btn-group" data-toggle="buttons">
          <label class="btn active">
            <input type="checkbox" checked=""> 多选1
          </label>
          <label class="btn">
            <input type="checkbox"> 多选2
          </label>
          <label class="btn">
            <input type="checkbox"> 多选3
          </label>
        </div>
      </td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"buttons"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn active"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="tag">&gt;</span><span class="pln"> 多选1
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 多选2
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 多选3
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
        <p>为按钮组中的每个按钮使用<code>&lt;label&gt;</code>标签，并在其中包含checkbox类型的表单控件就可以启用一个按钮组的多选组件。其机制同于表单中的多项选择控件（复选框）。按钮组的用法参见 <a href="#component/buttongroup">组件 → 按钮组</a>。</p>
      </td>
    </tr>
    <tr>
      <td>
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" id="option1" checked=""> 单选1
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" id="option2"> 单选2
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" id="option3"> 单选3
          </label>
        </div>
      </td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"buttons"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary active"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"options"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"option1"</span><span class="pln"> </span><span class="atn">checked</span><span class="tag">&gt;</span><span class="pln"> 单选1
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"options"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"option2"</span><span class="tag">&gt;</span><span class="pln"> 单选2
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"options"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"option3"</span><span class="tag">&gt;</span><span class="pln"> 单选3
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
        <p>为按钮组中的每个按钮使用<code>&lt;label&gt;</code>标签，并在其中包含radio类型的表单控件就可以启用一个按钮组的单选组件。其机制同于表单中的单项选择控件。按钮组的用法参见 <a href="#component/buttongroup">组件 → 按钮组</a>。</p>
    </td></tr>
    <tr>
      <td><button id="loadingBtnExample" type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loadingBtnExample"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">data-loading-text</span><span class="pun">=</span><span class="atv">"正在加载..."</span><span class="tag">&gt;</span><span class="pln">加载状态</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <pre class="prettyprint prettyprinted" style=""><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#loadingBtnExample'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> $btn </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span><span class="pln">
$btn</span><span class="pun">.</span><span class="pln">button</span><span class="pun">(</span><span class="str">'loading'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 此处使用 setTimeout 来模拟你的复杂功能逻辑</span><span class="pln">
setTimeout</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    $btn</span><span class="pun">.</span><span class="pln">button</span><span class="pun">(</span><span class="str">'reset'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="lit">2000</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code></pre>
        <p>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。</p>
        <p>你需要手动为按钮启用加载状态特性。</p>
      </td>
    </tr>
    <tr>
      <td>
        <a disabled="" href="#" class="btn btn-primary disabled">已禁用的操作</a> <a disabled="" href="#" class="btn disabled">禁用的操作</a>
      </td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">disabled</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/url/"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn disabled"</span><span class="tag">&gt;</span><span class="pln">禁用的操作</span><span class="tag">&lt;/a&gt;</span></code></pre>
        <p>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</p>
        <p>为按钮增加CLASS <code>.disabled</code> 即可让一个按钮使用被禁用的外观。你或许还需要为按钮增加 <code>disabled</code> 属性来禁用用户点击等操作。</p>
      </td>
    </tr>
  </tbody>
</table></div></article></section>



<script>
function afterPageLoad() {
    $('#loadingBtnExample').on('click', function() {
        var $btn = $(this);
        $btn.button('loading');

        // 此处使用 setTimeout 来模拟你的复杂功能逻辑
        setTimeout(function() {
            $btn.button('reset');
        }, 2000);
    });
}
</script><section><header><h3>按钮的颜色</h3></header><article><p>按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。</p><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <th class="col-md-4">实例</th>
      <th>描述</th>
    </tr>
    <tr>
      <td><button type="button" class="btn">默认</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">默认</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>默认外观按钮</p>
      </td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-primary">主要</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">主要</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>提供额外的视觉感, 可在一系列的按钮中指出主要操作</p>
      </td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-info">信息</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-info "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">信息</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>默认样式的替代样式</p>
      </td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-success">成功</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-success "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">成功</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>表示成功或积极的动作</p>
      </td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-warning">警告</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-warning "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">警告</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>提醒应该谨慎采取这个动作</p>
      </td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-danger">危险</button></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-danger "</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">危险</span><span class="tag">&lt;/button&gt;</span></code></pre>
        <p>表示这个动作危险或存在危险</p>
      </td>
    </tr>
  </tbody>
</table></div></article></section></div>
</section>
{/block}

{block name="script"}

{/block}